!function(){

var sty = document.createElement('style');
sty.innerHTML = `.card-outer{width: 100%;padding: 0.2rem;}
.card-outer ul{width: 100%;border-radius: 0.1rem;background: var(--sm_bg);display: flex;flex-wrap: wrap;}
.card-outer ul>li{padding: 0.2rem;width: 2rem;height: 1.6rem;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.card-outer ul.menu>li{width: 1.5rem;height: 1.1rem;}
.card-outer ul>li>[ico]{font-size: 0.45rem;line-height: 1;width: 0.45rem;height: 0.45rem;object-fit: contain;}
.card-outer ul>li>p{overflow:hidden;white-space: nowrap;text-align: center;width: 100%;font-size: 0.16rem;}
.card-outer ul>li>b{font-size: 0.4rem;}`;
document.querySelector('head').appendChild(sty);
module.exports = {
	props: ['config','title','type','list'],
	template: `<div class="card-outer">
		<h2 v-html="config.title"></h2>
		<ul :class="config.type">
			<li v-for="row in config.list" @click="eval(row.onclick, row)">
				<template v-if="/^ico-/.test(row.ico)"><i ico :class="row.ico"></i></template>
				<template v-else-if="/^https?:/.test(row.ico)"><img ico :src="row.ico"/></template>
				<p v-html="row.content"></p>
				<b>{{ row.num }}</b>
			</li>
		</ul>
	</div>`,
	methods: {
		eval: function(f, row){
			typeof(f)=="function" && f(row);
		}
	}
}

}()
